<template>
  <cu-layout :navProp="{ placeholder: true, title: '我的预定', textColor: 'black' }" :bgStyle="{ color: '#ffffff' }">
    <view :class="[`${prefixCls}-my-reservation-container`]">
      <view v-if="dataList.length == 0">
        <cu-empty mode="data" text="暂无预定"> </cu-empty>
      </view>
      <view v-else>
        <view class="reservation-item" v-for="(item, index) in dataList" :key="index" @click="handleJumpDetail(item)">
          <view class="reservation-item-title">
            <text class="date">到期时间：{{ item.lose_time }}</text>
            <text class="status">{{ item.status }}</text>
          </view>
          <view class="reservation-item-detail">
            <image :src="item.cover"></image>
            <view class="info">
              <text class="Deposit">
                定金：<text class="price-primary"> {{ item.total_fee }}元</text>
              </text>
              <text class="Building">{{ item.room_name }}</text>
              <text class="shop">{{ item.project_name }}</text>
              <text class="price">
                房租：
                <text class="price-primary">{{ item.old_rent }}元/间/月</text>
              </text>
            </view>
          </view>
          <view v-if="item.status == '预定成功'" class="btn-wrap">
            <view class="btn" @click="handleSigning(item)">去签约</view>
          </view>
        </view>
      </view>
    </view>
  </cu-layout>
</template>

<script>
import { mapActions, mapGetters } from 'vuex'
import { reserveList } from './api'
const statusEnum = {
  0: '预定成功',
  1: '已过期',
  2: '已作废',
  3: '已签约',
}
export default {
  name: 'my-reservation',
  components: {},
  mixins: [],
  props: {},
  data() {
    return {
      dataList: [],
    }
  },
  // 侦听属性
  watch: {},
  // 计算属性
  computed: {
    ...mapGetters([]),
  },
  // 监听页面加载，该钩子被调用时data,computed,function,watch,props,slots已设置完成
  onLoad(options) {
    this.getData()
  },
  // 监听页面显示，页面每次出现在屏幕上都触发
  onShow() {},
  // 监听页面初次渲染完成，此时组件已挂载完成
  onReady() {},
  // 下拉刷新
  onPullDownRefresh() {
    this.getData()
  },
  // 加载更多
  onReachBottom() {},

  created() {},
  mounted() {},
  destroyed() {},
  methods: {
    ...mapActions([]),
    async getData() {
      const { data } = await reserveList()
      this.dataList = data
      uni.stopPullDownRefresh()
    },
    handleJumpDetail({ id }) {
      this.$ROUTE.go('/pages/subpackage/reserved/booking-details', { id })
    },
    handleSigning({ project_name: projectName, project_id: projectId, room_id: roomId, room_number }) {
      this.$ROUTE.go('/pages/subpackage/online-signing/index', { status: 'convert', projectName, projectId, roomId, room_number })
    },
  },
}
</script>

<style lang="scss" scoped>
// page {
//   background: white !important;
// }
.#{prefixCls('my-reservation-container')} {
  position: relative;
  background: #f5f5f5;
  padding: 30rpx;
  .reservation-item {
    width: 100%;
    background: white;
    border-radius: 8px;
    margin-bottom: 15px;
    padding: 10px 15px;
    box-sizing: border-box;
    .reservation-item-title {
      font-size: 24rpx;
      font-weight: 500;
      padding-bottom: 10px;
      border-bottom: 1px solid #f5f5f5;
      display: flex;
      align-items: center;
      .status {
        font-size: 20rpx;
        margin-left: auto;
        color: white;
        border-radius: 8rpx;
        background: $uv-primary;
        padding: 10rpx;
        box-sizing: border-box;
      }
    }
    .reservation-item-detail {
      box-sizing: border-box;
      padding: 20px 10px;
      display: flex;
      image {
        background: #f1f1f1;
        width: 120px;
        height: 90px;
        border-radius: 8rpx;
        margin-right: 30rpx;
      }
      .info {
        .price-primary {
          color: $uv-price-primary;
        }
        display: flex;
        flex-direction: column;
        .Deposit {
          color: #222222;
        }
        .Building {
          font-weight: 600;
          font-size: 14px;
          margin: 10rpx 0;
        }
        .shop {
          font-weight: 400;
          font-size: 11px;
          color: #666666;
          margin-bottom: 5rpx;
        }
        .price {
          font-weight: 600;
          font-size: 12px;
        }
      }
    }
    .btn-wrap {
      padding: 5px;
      border-top: 1px solid #f1f1f1;
      text-align: right;
      .btn {
        background: $uv-primary;
        display: inline-block;
        padding: 5px 20px;
        color: white;
        border-radius: 4px;
        margin-top: 6px;
      }
    }
  }
}
</style>
